var booksArray = [
  {name: "图书1", author: "作者1", price: 30.1, imgpath: "booksImg/b1.jpg", pubDate: "出版时间1"},
  {name: "图书2", author: "作者2", price: 30.1, imgpath: "booksImg/b2.jpg", pubDate: "出版时间2"},
  {name: "图书3", author: "作者3", price: 30.1, imgpath: "booksImg/b3.jpg", pubDate: "出版时间3"},
  {name: "图书4", author: "作者4", price: 30.1, imgpath: "booksImg/b4.jpg", pubDate: "出版时间4"},
  {name: "图书5", author: "作者5", price: 30.1, imgpath: "booksImg/b5.jpg", pubDate: "出版时间5"},
  {name: "图书6", author: "作者6", price: 30.1, imgpath: "booksImg/b6.jpg", pubDate: "出版时间6"},
  {name: "图书7", author: "作者7", price: 30.1, imgpath: "booksImg/b7.jpg", pubDate: "出版时间7"},
  {name: "图书8", author: "作者8", price: 30.1, imgpath: "booksImg/b8.jpg", pubDate: "出版时间8"},
];

/**
 * 购物车数组
 * @type {*[]}
 */
var shopArray=[];

window.onload = function () {
//更新表格
  showData(booksArray);

}


function $(id) {
  return document.getElementById(id);

}

/**
 * 更新图书表格数据
 * @param array
 */
function showData(array) {
  let str = "";
  array.forEach(n => {
    str += `<tr onclick="showbookInfo(this)"><td><img src=${n.imgpath}></td><td>${n.name}</td><td>${n.author}</td><td>${n.price}</td></tr>`
  });

  $("booksTable-tbody").innerHTML = str;
}

/**
 * 查询
 * @param inputObj
 */
function querybooks(inputObj) {
//得到查询关键字
  let str = inputObj.previousElementSibling.value;
  //筛选出包含关键字的数组
  let array = booksArray.filter(n => n.name.indexOf(str)!=-1);
  //更新图书表格
  showData(array);
}
/*
当前选中的tr对象
 */
var trObj = null;

/**
 * 显示图书信息
 * @param obj
 */
function showbookInfo(obj) {
  if (trObj!=null){
    trObj.style.backgroundColor = "white";
  }
//选中变色
  obj.style.backgroundColor = "blue";
  trObj=obj;

  $("left").style.visibility = "visible";
//得到选中行的图书名称
  let tdArray = obj.getElementsByTagName("td");

  let name =tdArray[1].innerHTML;
  // alert(name);
  // 将图书信息展示在左边
  showInfo(name);
}

/**
 * 选中的图书对象
 * @type {Object}
 */
var bookObj=null;
/**
 * 将图书信息展示在左边
 * @param name  书名
 */
function showInfo(name) {

  //得到图书对象
   bookObj = booksArray.find(n => n.name==name);

  //显示信息
  let infoObj = $("left-info");
  infoObj.innerHTML = `<span>书名：`+bookObj.name+`</span><br><span>作者：`+bookObj.author+`</span><br><span>出版时间：`+
    bookObj.pubDate+`</span><br><span>单价：`+bookObj.price+`</span><br>`;
  //显示图片
  $("bookImg").src = bookObj.imgpath;

}


/**
 * 放入购物车
 */
function put() {
// 显示遮罩
  $("shade").style.visibility = "visible";
  //显示购物车
  $("shopCarBox").style.display = "block";
//判断购物车中是否有已经存在该商品
  let index =shopArray.findIndex(n => n.name==bookObj.name)
  if ((index)!=-1){//已存在
    // 商品数量+1
    shopArray[index].number+=1;
    //更新购物车
    updateShopCar();
  }
  else {//不存在
    //封装为商品对象
    let shopObj = {name:bookObj.name,price:bookObj.price,number:1};
    //将商品对象添加进商品数组
    shopArray.push(shopObj);
    //更新购物车
    updateShopCar();
  }

}

/*
更新购物车
 */
function updateShopCar() {
  let str = "";
  shopArray.forEach(n =>{
    str+=`<tr><td>`+n.name+`</td><td>`+n.price+`</td><td><input type="number" onblur="updateNum(this)" value=`+n.number+
      `></td><td>`+n.price*n.number+`</td><td><input type="button" value="移除商品" onclick="del(this)"></td></tr>`
  });

  $("shopCar-tbody").innerHTML = str;

  //获取商品总价
  let allPrice = 0;
  shopArray.forEach(n =>{
    allPrice+=(n.price*n.number);
  });
  $("allprice").innerHTML = allPrice;

}

/**
 * 更改数量
 * @param tdObj  当前数量
 */
function updateNum(tdObj) {
  //得到当前修改数量的商品对象
  let shopName = tdObj.parentNode.previousElementSibling.previousElementSibling.innerHTML;
  let shopObj = shopArray.find(n => n.name==shopName);

  //判断数量是否小于1
  if (tdObj.value<1){//小于1
    //将数量修改为原来的值
    tdObj.value=shopObj.number;
  }
  else {//不小于1
    //修改商品数量
    shopObj.number=tdObj.value;
    //更新表格
    updateShopCar();
  }
}

/**
 * 关闭遮罩和购物车
 */
function closeShade() {
// 关闭遮罩
  $("shade").style.visibility = "hidden";
  //显示购物车
  $("shopCarBox").style.display = "none";
}

/**
 * 移除商品
 * @param tdObj  移除按钮
 */
function del(tdObj) {
  //得到当前需要移除的商品对象
  let shopName = tdObj.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML;
  //得到下标
  let index = shopArray.findIndex(n => n.name==shopName);
  //从商品数组中删除该商品
  shopArray.splice(index,1);
  //更新购物车
  updateShopCar();
}
